<!DOCTYPE html>
<html>
<head>
    <title>家电维修报价器</title>
    <style>
        body { font-family: Arial, sans-serif; max-width: 500px; margin: 20px auto; padding: 20px }
        .calculator { background: #f5f5f5; padding: 20px; border-radius: 10px }
        .input-group { margin: 15px 0 }
        label { display: inline-block; width: 150px }
        input[type="number"] { width: 120px; padding: 5px }
        .radio-group { margin: 8px 0 }
        button {
            background: #4CAF50;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer
        }
        .result { margin-top: 20px; padding: 15px; background: white; border-radius: 5px }
    </style>
</head>
<body>
    <div class="calculator">
        <h2>⚡家电维修报价计算器</h2>

        <div class="input-group">
            <label>配件材料费（元）:</label>
            <input type="number" id="parts" min="0" step="10">
        </div>

        <div class="input-group">
            <label>维修类型:</label>
            <div class="radio-group">
                <label><input type="radio" name="type" value="30" checked> 调节类（30元/时）</label><br>
                <label><input type="radio" name="type" value="80"> 元器件维修（80元/时）</label><br>
                <label><input type="radio" name="type" value="100"> 控制系统（100元/时）</label>
            </div>
        </div>

        <div class="input-group">
            <label>维修耗时（分钟）:</label>
            <input type="number" id="time" min="1" value="30">
        </div>

        <div class="input-group">
            <label>操作难度:</label>
            <div class="radio-group">
                <label><input type="radio" name="difficulty" value="0" checked> 常规操作</label><br>
                <label><input type="radio" name="difficulty" value="40"> 中等难度</label><br>
                <label><input type="radio" name="difficulty" value="80"> 高危环境</label>
            </div>
        </div>

        <button onclick="calculate()">立即计算</button>

        <div class="result" id="result">
            📝计算结果将显示在这里
        </div>
    </div>

    <script>
        function calculate() {
            // 获取输入值
            const parts = Number(document.getElementById('parts').value) || 0;
            const minutes = Number(document.getElementById('time').value);
            const rate = Number(document.querySelector('input[name="type"]:checked').value);
            const difficulty = Number(document.querySelector('input[name="difficulty"]:checked').value);

            // 计算工时
            const hours = minutes <= 60 ? 1 : Math.ceil(minutes / 60 * 100)/100;  // 保留两位小数

            // 计算总费用
            const total = parts + (rate * hours) + difficulty;

            // 显示结果
            document.getElementById('result').innerHTML = `
                <b>报价明细：</b><br>
                🔧配件费用：${parts.toFixed(2)}元</br>
                ⏱工时费用：${rate}元 × ${hours}小时 = ${(rate * hours).toFixed(2)}元</br>
                ⚠难度附加：${difficulty}元</br>
                <hr>
                💰<span style="color:red;font-size:1.2em">总报价：${total.toFixed(2)}元</span>
            `;
        }
    </script>
</body>
</html>